<template>
    <div class="container">
        <div class="loginMain">
            <div class="loginLeft fl">
                <img src="../assets/images/login.jpg">
            </div>
            <div class="loginRight fr">
                <div class="loginBox">
                    <div class="loginTit">登录</div>
                    <div class="loginInfo">

                            <ul>
                                <li :class="{ error: validation.hasError('tel') }">
                                    <span>手机号</span>
                                    <input type="text" placeholder="请输入手机号码" class="tel inputWrite" id="tel" name="tel" v-model="tel">
                                    <div class="error-tips">{{ validation.firstError('tel') }}</div>
                                </li>
                                <li :class="{ error: validation.hasError('pass') }">
                                    <span>密码</span>
                                    <input type="password" placeholder="请输入登录密码" class="pass inputWrite" id="pass" name="pass" v-model="pass">
                                    <div class="error-tips">{{ validation.firstError('pass') }}</div>
                                </li>
                                <li :class="{ error: validation.hasError('yzm') }">
                                    <span>验证码</span>
                                    <input type="text" class="inputWrite yzm" placeholder="请输入验证码" id="yzm" name="yzm" v-model="yzm">
                                    <a href="javascript:void(0);"><img :src="codeImg" @click="changeCode" class="img-code"></a>
                                    <div class="error-tips">{{ validation.firstError('yzm') }}</div>
                                </li>
                                <li>
                                    <input type="submit" value="登录" @click="submit">
                                    <div class="error-tips" v-text="apiError"></div>
                                </li>
                                <li class="last">
                                    <a href="/find">忘记密码？</a>
                                </li>
                            </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Api from '../api/api'
    const api = new Api();
    import simpleVueValidator from 'simple-vue-validator'
    let Validator = simpleVueValidator.Validator;
    const reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
    export default{
        data (){
            return {
                tel: '',
                pass: '',
                yzm: '',
                apiError: '',
                codeImg: ''
            }
        },
        created(){
            api.getCodeImg().then(res => {
                var buff = new Buffer(res.data, 'binary').toString('base64');
                this.codeImg = `data:image/jpg;base64,${buff}`;
            })
        },
        validators: {
            tel (value){
                return Validator.value(value).required('用户名不能为空！').custom(function(){
                    if(!Validator.isEmpty(value)){
                        if(value.length !== 11 || !reg.test(value)){
                            return '请输入正确的用户名！'
                        }
                    }
                });
            },
            pass (value){
                return Validator.value(value).required('密码不能为空！').custom(function(){
                    if(!Validator.isEmpty(value)){
                        if(value.length<8 || value.length>20){
                            return '密码长度为8-20位！'
                        }
                    }
                });
            },
            yzm (value){
                return Validator.value(value).required('验证码不能为空！').custom(function(){
                    if(!Validator.isEmpty(value)){
                        if(value.length !== 4){
                            return '请输入正确的验证码！'
                        }
                    }
                });
            }
        },
        methods: {
            submit(){
                this.apiError='';
                this.$validate()
                    .then((success) =>{
                        if(success){
                            let param = {
                                username: this.tel,
                                userpwd: this.pass,
                                verifyCode: this.yzm
                            };
                            api.getLogin(param).then(res => {
                                if(res.data.success){
                                    localStorage.setItem('telephone',this.tel);
                                    sessionStorage.setItem('token',res.data.data.token);
                                    this.$router.replace({ path: '/'});
                                }else{
                                    this.apiError=res.data.cause
                                    if(res.data.code === 1105){
                                        api.getCodeImg().then(res => {
                                            var buff = new Buffer(res.data, 'binary').toString('base64');
                                            this.codeImg = `data:image/jpg;base64,${buff}`;
                                        })
                                    }
                                }
                            });
                        }
                    });
            },
            changeCode(){
                api.getCodeImg().then(res => {
                    var buff = new Buffer(res.data, 'binary').toString('base64');
                    this.codeImg = `data:image/jpg;base64,${buff}`;
                })
            }
        }
    }
</script>
<style>
    .error-tips{ color: red; padding-top: 5px;}
</style>